<template>
  <div style="margin-top: 15px">
    <div style="display:flex;row nowrap">
      <el-tag
        v-for="(tag, index) in userList"
        class="mx-1"
        :key="tag.id"
        closable
        @close="deleteFn(index)"
        style="margin-right: 5px"
        >{{ tag.username }}</el-tag
      >
      <el-button
        type="primary"
        class="button-new-tag ml-1"
        size="small"
        @click="showDialog()"
      >
        <el-icon>
          <Plus />
        </el-icon>
      </el-button>
    </div>
    <el-dialog
      title="人员选择"
      v-model="dialogCopyVisible"
      :before-close="handelcloseDialog"
      :close-on-click-modal="true"
      width="50%"
      top="60px"
      append-to-body
      center
    >
      <div class="fx-dialog" :close-on-click-modal="false">
        <div class="flex-item">
          <div class="box-left column">
            <span><i class="one" />组织架构</span>
            <el-scrollbar wrap-class="tree-wrapper-scroller orgTree1">
              <el-tree
                ref="orgTree"
                :data="treeData"
                node-key="id"
                highlight-current
                @node-click="handleNodeClick"
              >
                <template #default="{ data }">
                  <span class="custom-tree-node">
                    <span>
                      <i
                        v-if="data.id === 0"
                        class="treeIcon1 treeIcon_father2"
                      />
                      <i v-else class="treeIcon1 treeIcon_children2" />
                      {{ data.name }}
                    </span>
                  </span>
                </template>
              </el-tree>
            </el-scrollbar>
          </div>
          <!--              v-if="params.isMultiple !== undefined"-->
          <span class="link el-icon-arrow-right" />
          <!-- 多选 -->
          <div v-if="multiple === true" class="box-right column">
            <span><i class="two" />人员</span>
            <el-input
              v-model="filterText"
              placeholder="输入关键字筛选"
              class="filter-text"
              clearable
              style="padding: 10px 10px 0px 10px; margin-bottom: 0"
            />
            <el-checkbox-group v-model="copyPeople" @change="handleCheckChange">
              <el-checkbox
                v-for="item in filterCheckList"
                :key="item.id"
                :label="item.id"
              >
                {{ item.username }}
                <span v-if="item.personStatus" class="red"
                  >({{ item.personStatus }})</span
                >
              </el-checkbox>
            </el-checkbox-group>
          </div>
          <!-- 单选 -->
          <div class="box-right column" v-show="multiple === false">
            <span><i class="two" />人员</span>
            <el-input
              v-model="filterText"
              placeholder="输入关键字筛选"
              class="filter-text"
              clearable
              style="padding: 10px 10px 0px 10px; margin-bottom: 0"
            />
            <el-radio-group v-model="copyPeople1" @change="handleCheckChange1">
              <el-radio
                v-for="item in filterCheckList"
                :key="item.id"
                :label="item.id"
              >
                {{ item.username }}
                <span v-if="item.personStatus" class="red"
                  >({{ item.personStatus }})</span
                >
              </el-radio>
            </el-radio-group>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
        <el-button type="primary" @click="sure"> 确 定</el-button>
        <el-button type="danger" plain @click="handelcloseDialog">
          取 消
        </el-button>
      </div>
      </template>
    </el-dialog>
  </div>
</template>


<script setup name="OrgPicker">
/* 组织结构下人员选择的弹框 */
// import { getListData } from '@/utils/utils';
//import mockApi from "../../api/mockApi.js";
import { findOrgData,findUserByOrgId } from "../../api/index.js"
import { mapGetters } from "vuex";

import {
  reactive,
  ref,
  createApp,
  
  computed,
  onMounted,
  toRefs,
  watch,
  getCurrentInstance,
  nextTick,
} from "vue";
import { useStore } from "vuex";
/* 组件局部注册 */
const app = createApp({});
const store = useStore();
const { currentInstance, proxy } = getCurrentInstance();

const emit = defineEmits(["closeDialogCopy", "copyData"]);
const props = defineProps({
  params: {
    type: Object,
    default: () => {
      return {};
    },
  },
  // 回显人员id，打开弹窗时已勾选人员的回显
  uuidList: {
    type: String,
  },
  title: {
    type: String,
    default: "",
  },
  multiple: {
    //是否多选
    default: false,
    type: Boolean,
  },
  userList: {
    default: () => {
      return [];
    },
    type: Array,
  },

});

const { params, uuidList, title, multiple, userList } =
  toRefs(props);

const tableMaxHeight = ref("auto");
const treeData = ref([]);
// 单选人员
const copyPeople1 = ref("");
// 多选的人员
const copyPeople = ref([]);
// 根据组织获取的人员数组
const checkList = ref([]);

// 过滤文字
const filterText = ref("");

const perList = ref([])

const dialogCopyVisible = ref(false);

const orgTree = ref(null);

const filterCheckList = computed(() => {
  // 人员列表姓名模糊过滤
  if (!filterText.value) {
    return checkList.value;
  } else {
    return checkList.value.filter(
      (item) => item.name.indexOf(filterText.value) !== -1
    );
  }
});

const getData = () => {
  findOrgData()
    .then((res) => {
      if (res.status === 0) {
        console.log("组织数据", res.data);
        console.log(res.data);
        treeData.value = res.data;
        nextTick(() => {
          console.log("nextTick");
          orgTree.value.setCurrentKey(0);
          findUserByOrgId({id:'0'}).then((res) => {
            console.log("用户查询-------->", JSON.stringify(res));
            checkList.value = res.data;
          });
        });
      }
    })
    .catch(function (error) {
      console.log(error);
    });
};

const showDialog = () => {
  console.log("<----------------------打开弹窗开始----------------->");
  dialogCopyVisible.value = true;
};

// 树的节点点击事件
const handleNodeClick = (data) => {
  findUserByOrgId({id:data.id}).then((res) => {
    checkList.value = res.data;
  });
};
// 人员对象数组进行过滤，去重！
const personSortFn = (arr) => {
  console.log("<----------------------去重开始----------------->",JSON.stringify(arr))
  // const res = new Map();
  // return arr.filter(arr => !res.has(arr.id) && res.set(arr.id));
  return arr;
  // return arr.filter((item, index, arr) => {
  //   return arr.map((item) => item.id).indexOf(item.id) === index;
  // });
};
// 多选
const handleCheckChange = (val) => {
  // 当前页面勾选人员的数据
  let personPage = checkList.value.filter((item) => val.includes(item.id));
  // 勾选前表格里当前页面已经勾选的数据
  let tPerPage = checkList.value.filter((item) =>
    userList.value.some((it) => it.id === item.id)
  );

  // 取消勾选
  if (personPage.length == 0) {
    userList.value = userList.value.filter(
      (item) => item.id !== tPerPage[0].id
    );
    perList.value = perList.value.filter((item) => item.id !== tPerPage[0].id);
    return;
  }
  if (personPage.length < tPerPage.length) {
    // 取消勾选 筛选出刚刚取消勾选的数据
    let consolItem = tPerPage.filter((item) =>
      personPage.every((it) => it.id !== item.id)
    );
    userList.value = userList.value.filter(
      (item) => item.id !== consolItem[0].id
    );
    perList.value = perList.value.filter(
      (item) => item.id !== consolItem[0].id
    );
  } else if (personPage.length > tPerPage.length) {
    // 勾选人员
    perList.value.push(...personPage);
    //userList.value = personSortFn(perList.value);
    userList.value.push(...personPage);

  }

  console.log("------去重结束----------------->",JSON.stringify(userList.value))
};
// 单选
const handleCheckChange1 = (val) => {
  //let personPage = checkList.value.filter((item) => val.value.includes(item.id));

  // let personPage = checkList.value.filter((item) => {
  //   return val === item.id;
  // });
  //userList.value = personPage;
  userList.value = val;
};
// 删除表格某个数据
const deleteFn = (index) => {
  if (multiple) {
    // 多选
    copyPeople.value = copyPeople.value.filter(
      (item) => item !== userList.value[index].id
    );
    userList.value = userList.value.filter(
      (item) => item.id !== userList.value[index].id
    );
    userList.value.splice(index, 1);
  } else {
    // 单选
    copyPeople1.value = "";
    userList.value = [];
  }
  emit("copyData", userList);
};
// 确认
const sure = () => {
  // emit('copyData', this.userList);
  console.log("userList--------->", JSON.stringify(userList.value));
  emit("copyData", userList);
  dialogCopyVisible.value = false;
  // emit('closeDialogCopy');
};
// 取消
const handelcloseDialog = () => {
  dialogCopyVisible.value = false;
  // emit('closeDialogCopy');
};

watch(
  dialogCopyVisible,
  (newValue, oldValue) => {
    if (newValue) {
      filterText.value = "";
      userList.value = [];
      copyPeople1.value = "";
      copyPeople.value = [];
      perList.value = [];
      // 获取组织树
      getData();

      if (uuidList && uuidList != "") {
        // this.$api.system
        //     .getUserByIds({ userId: this.uuidList })
        //     .then((res) => {
        //       this.userList = res.data;
        //       this.perList.push(...res.data);
        //       this.params.isMultiple
        //           ? (this.copyPeople = res.data.map((item) => item.id))
        //           : (this.copyPeople1 = res.data[0].id);
        //     });
      }
      if (userList && userList != "") {
        console.log("userList", JSON.stringify(userList));
        //userList.value = userList.value;
        //perList.value.push(...userList);
        //multiple?copyPeople.value = userList:copyPeople1.value = userList[0];
      }
    }
    console.log("值发生了变更", newValue, oldValue);
  },
  { deep: true }
);


watch(
  userList,
  (newValue, oldValue) => {
    console.log("值发生了变更", newValue, oldValue);
  },
  { deep: true }
);

// export default {
//   props: {
//     // dialogCopyVisible: {
//     //   type: Boolean,
//     //   default: false,
//     // },
//     /**
//      *  params: {
//      *    title： 弹框标题
//      *    isMultiple: 是否多选
//      *    treeData： 组织结构
//      *  }
//      *
//      * */
//     params: {
//       type: Object,
//       default: () => {
//         return {};
//       },
//     },
//     // 回显人员id，打开弹窗时已勾选人员的回显
//     uuidList: {
//       type: String,
//     },
//     title: {
//       type: String,
//       default: '',
//     },
//   },
//   data() {
//     return {
//       tablePerson: [
//         {
//           label: '序号',
//           type: 'index',
//           width: 60,
//           align: 'center',
//         },
//         {
//           label: '姓名',
//           minWidth: 200,
//           showOverflowTooltip: true,
//           align: 'center',
//           prop: 'name',
//         },
//         {
//           label: '组织',
//           minWidth: 200,
//           align: 'center',
//           showOverflowTooltip: true,
//           prop: 'orgName',
//         },
//         {
//           label: '操作',
//           minWidth: 150,
//           prop: 'operate',
//           show: 'template',
//           align: 'center',
//         },
//       ],
//       tableMaxHeight: 'auto',
//       userList: [],
//       treeData: [{
//         id: 1,
//         name: '一级 1',
//         children: [{
//           id: 4,
//           name: '二级 1-1',
//           children: [{
//             id: 9,
//             name: '三级 1-1-1'
//           }, {
//             id: 10,
//             name: '三级 1-1-2'
//           }]
//         }]
//       }, {
//         id: 2,
//         name: '一级 2',
//         children: [{
//           id: 5,
//           name: '二级 2-1'
//         }, {
//           id: 6,
//           name: '二级 2-2'
//         }]
//       }, {
//         id: 3,
//         name: '一级 3',
//         children: [{
//           id: 7,
//           name: '二级 3-1'
//         }, {
//           id: 8,
//           name: '二级 3-2'
//         }]
//       }],
//       // 单选人员
//       copyPeople1: '',
//       // 多选的人员
//       copyPeople: [],
//       // 根据组织获取的人员数组
//       checkList: [],
//       // 过滤文字
//       filterText: '',
//       perList: [],
//       dialogCopyVisible: false
//     };
//   },
//   computed: {
//     ...mapGetters(['user']),
//     // 用户列表副本
//     filterCheckList: function () {
//       // 人员列表姓名模糊过滤
//       if (!this.filterText) return this.checkList;
//       return this.checkList.filter(
//           (item) => item.name.indexOf(this.filterText) !== -1
//       );
//     },
//   },
//   watch: {
//     dialogCopyVisible(val) {
//       console.log("val------->",val)
//       if (val) {
//         // 打开时清空相关数据
//         this.filterText = '';
//         this.userList = [];
//         this.copyPeople1 = '';
//         this.copyPeople = [];
//         this.perList = [];
//         // 获取组织树
//         this.getData();
//         // 如果勾选人员后打开弹窗进行修改
//         if (this.uuidList && this.uuidList != '') {
//           // this.$api.system
//           //     .getUserByIds({ userId: this.uuidList })
//           //     .then((res) => {
//           //       this.userList = res.data;
//           //       this.perList.push(...res.data);
//           //       this.params.isMultiple
//           //           ? (this.copyPeople = res.data.map((item) => item.id))
//           //           : (this.copyPeople1 = res.data[0].id);
//           //     });
//         }
//       }
//     },
//   },
//   methods: {
//     showDialog() {
//       console.log("开始弹窗")
//       this.dialogCopyVisible = true;
//     },
//     // 获取左侧组织树结构数据
//     getData() {
//       // this.$api.system.getAllOrgList().then((res) => {
//       //   this.treeData = getListData(res.data, {
//       //     id: 'id',
//       //     pId: 'parent',
//       //     label: 'name',
//       //     children: 'children',
//       //   });
//       //   // 组织树默认选中当前登录人员所在组织
//       //   this.$nextTick(() => {
//       //     this.$refs.orgTree.setCurrentKey(this.$store.getters.user.orgId);
//       //   });
//       //   // 根据当前登录人员所在组织去获取右侧人员
//       //   this.$api.system
//       //       .getXtUserByOrgId(this.$store.getters.user.orgId)
//       //       .then((res) => {
//       //         this.checkList = res.data;
//       //       });
//       // });
//     },
//     // 树的节点点击事件
//     handleNodeClick(data) {
//       // this.$api.system.getXtUserByOrgId(data.id).then((res) => {
//       //   this.checkList = res.data;
//       // });
//     },
//     // 人员对象数组进行过滤，去重！
//     personSortFn(arr) {
//       return arr.filter((item, index, arr) => {
//         return arr.map((item) => item.id).indexOf(item.id) === index;
//       });
//     },
//     // 多选
//     handleCheckChange(val) {
//       // 当前页面勾选人员的数据
//       let personPage = this.checkList.filter((item) => val.includes(item.id));
//       // 勾选前表格里当前页面已经勾选的数据
//       let tPerPage = this.checkList.filter((item) =>
//           this.userList.some((it) => it.id === item.id)
//       );
//       // 取消勾选
//       if (personPage.length == 0) {
//         this.userList = this.userList.filter(
//             (item) => item.id !== tPerPage[0].id
//         );
//         this.perList = this.perList.filter(
//             (item) => item.id !== tPerPage[0].id
//         );
//         return;
//       }
//       if (personPage.length < tPerPage.length) {
//         // 取消勾选 筛选出刚刚取消勾选的数据
//         let consolItem = tPerPage.filter((item) =>
//             personPage.every((it) => it.id !== item.id)
//         );
//         this.userList = this.userList.filter(
//             (item) => item.id !== consolItem[0].id
//         );
//         this.perList = this.perList.filter(
//             (item) => item.id !== consolItem[0].id
//         );
//       } else if (personPage.length > tPerPage.length) {
//         // 勾选人员
//         this.perList.push(...personPage);
//         this.userList = this.personSortFn(this.perList);
//       }
//     },
//     // 单选
//     handleCheckChange1(val) {
//       let personPage = this.checkList.filter((item) => val.includes(item.id));
//       this.userList = personPage;
//     },
//     // 删除表格某个数据
//     deleteFn(index) {
//       if (this.params.isMultiple) {
//         // 多选
//         this.copyPeople = this.copyPeople.filter(
//             (item) => item !== this.userList[index].id
//         );
//         this.perList = this.perList.filter(
//             (item) => item.id !== this.userList[index].id
//         );
//         this.userList.splice(index, 1);
//       } else {
//         // 单选
//         this.copyPeople1 = '';
//         this.userList = [];
//       }
//     },
//     // 确认
//     sure() {
//       this.$emit('copyData', this.userList);
//       this.$emit('closeDialogCopy');
//     },
//     // 取消
//     handelcloseDialog() {
//       this.dialogCopyVisible = false;
//       this.$emit('closeDialogCopy');
//     },
//   },
// };
</script>
<style lang="less" scoped>
.dialog-footer {
  text-align: center !important;
}

.fx-dialog .flex-item > div.column {
  height: 250px !important;
}

.max-height {
  max-height: 150px;
  overflow-y: scroll;
}

// .el-scrollbar{
//   height: 100% -41px !important;
// }

.fx-dialog {
  .flex-item {
    display: flex;

    span.link {
      width: 40px;
      display: inline-block;
      text-align: center;
      line-height: 40px;
      height: 40px;
      color: #333333;
      font-weight: 600;
    }

    & > div {
      flex: 1;
      //padding: 15px 12px;
      border: solid 1px #e5e5e5;

      /* &:not(:last-child) {
        margin-right: 50px;
      } */

      &.column {
        height: 400px;
        overflow: auto;

        &.moreHeight {
          height: 500px;
        }

        & > div > label {
          &.el-checkbox {
            padding-left: 20px;
          }
        }

        & > span {
          color: #333333;
          width: 100%;
          display: block;
          line-height: 40px;
          padding-left: 18px;
          //padding-bottom: 10px;
          border-bottom: 1px solid #eaeaea;
          font-weight: 600;

          i {
            color: #3e96f0;
            display: inline-block;
            margin-right: 10px;
            height: 15px;
            width: 15px;

            &.one {
              background: url("../assets/next-task.png") center center no-repeat;
              background-size: 100% 100%;
            }

            &.two {
              background: url("../assets/next-user.png") center center no-repeat;
              background-size: 100% 100%;
            }
          }
        }

        .el-checkbox-group,
        .el-radio-group {
          padding-left: 20px;
          display: flex;
        }

        .el-checkbox-group {
          flex-wrap: wrap;

          & > label {
            width: 40%;
          }
        }

        .el-radio-group {
          display: flex;
          flex-direction: column;
        }

        .el-radio .el-radio__input.is-checked + .el-radio__label {
          background-color: #e2f0fd;
        }

        .el-radio .el-radio__label {
          padding: 0 8px 0 8px;
          margin-left: 10px;
        }

        .el-tree,
        .el-checkbox-group,
        .el-radio-group {
          margin-top: 5px;
        }
      }
    }
  }

  .item {
    display: flex;
    line-height: 45px;

    &:not(:last-child),
    &.last {
      margin-top: 10px;
    }

    span.tit {
      width: 100px;
    }

    label {
      line-height: 45px;
    }

    .el-date-editor input,
    input,
    .el-input__inner {
      height: 38px !important;
      line-height: 38px;
    }
  }
}
</style>